<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>关注</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title"></h1>
		</header>
		<div class="mui-content">
		    <div class="clearfix bg_detail">
				<div class="left width70 relative text_main">
					<div class="text_info absolute">
						<p></p>
					</div>
				</div>
				<ul class="right index_right">
					<li class="mg_top20">
						<a href="musicChose.html" class="cp">
							<audio id="audio"  autoplay="autoplay" poster='images/bg1.png'>  
				               <!-- <source src="" type="audio/mp3"></source>  -->
				                <!--<source src="video/fcml.wav" type="audio/vnd.wave"></source>-->  
				            </audio>
						</a>
					</li>
					<li class="mg_top40">
						<a href="javascript:;" onclick="userData()"><img class="head_index" workId='' src="images/head.png"/></a>
						<p>关注</p>
					</li>
					<li onclick="praiseWork()">
						<a href="javascript:void(0);"><img class="zan" src="images/index_gz.png"/></a>
						<p class="praiseNum">0</p>
					</li>
					<li class="pl_btn">
						<a href="javascript:void(0);"><img src="images/index_pl.png"/></a>
						<p class="commentNum">0</p>
					</li>
					<li class="share_btn">
						<a href="javascript:void(0);"><img src="images/index_share.png"/></a>
						<p class="shareNum">0</p>
					</li>
					<li>
						<a href="javascript:void(0);"><img src="images/index_xz.png"/></a>
						<p class="downloadNum">0</p>
					</li>
				</ul>
			</div>
		</div>
		<!--分享-->
		<ul class="bottom shore">
			<li>
				<img src="images/qq.png" alt="" />
				<p>QQ</p>
			</li>
			<li>
				<img src="images/pay_wx.png" alt="" />
				<p>微信好友</p>
			</li>
			<li>
				<img src="images/pyq.png" alt="" />
				<p>朋友圈</p>
			</li>
		</ul>
		<div class="overlay"></div>
		<!--评论-->
		<div class="index_pl padding_lr12">
			<p class="text_right padding_10"><img class="close" width="15" src="images/close_small.png"/></p>
			<div class="index_pllist">
				<!--<dl class="index_plitem mg_b10">
					<dt><img src="images/index_head.png"/></dt>
					<dd>
						<p class="color_25 bold">用户昵称</p>
						<h6 class="color_8 mg_tb10">15分钟前</h6>
						<p class="color_25 mg_top5">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内。</p>
						<p class="mg_top15">
							<img width="20"  class="vertical-align_m" src="images/heart.png" alt="" />
							1.5w
						</p>
					</dd>
				</dl>
				<dl class="index_plitem mg_b10">
					<dt><img src="images/index_head.png"/></dt>
					<dd>
						<p class="color_25 bold">用户昵称</p>
						<h6 class="color_8 mg_tb10">15分钟前</h6>
						<p class="color_25 mg_top5">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内。</p>
						<p class="mg_top15">
							<img width="20"  class="vertical-align_m" src="images/heart_e.png" alt="" />
							1.5w
						</p>
					</dd>
				</dl>-->
			</div>
			<div class="index_plinput">
				<input type="text" name="" id="" value="" />
				<a href="javascript:void(0);" onclick="commentWork()">评论</a>
			</div>
		</div>
	</body>
    
	<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()
		$(".share_btn").click(function(){
				$('.shore').fadeIn(200)
				$('.overlay').show()
			})
			$('.overlay').click(function(){
				$(this).hide()
				$('.shore').fadeOut(200)
			})
//			评论
           $(".pl_btn").click(function(){
				$('.index_pl').fadeIn(200)
				$('.overlay').show()
				getCommentList(1)
			})
			$('.overlay').click(function(){
				$(this).hide()
				$('.index_pl').fadeOut(200)
			})
			$('.close').click(function(){
				$('.overlay').hide()
				$('.index_pl').fadeOut(200)
			})
		var id = getUrlParam('id')
//		查看他人主页
		function getWorkInfo(){
			$('.gif').show()
			$.ajax({
				type:"post",
				url:urlcom + "userCenter/getWorkInfo",
				async:true,
				dataType:'json',
				data:{
					userId:localStorage.getItem('userId'),
					workId:getUrlParam('id')
				},
				success:function(res){
					$('.gif').hide()
					if(res.code==0){
						$('.mui-title').html(res.data.userName)
						$('.head_index').attr('workId', res.data.workId)
						$('.head_index').attr('workUserId', res.data.workUserId)
						$('.head_index').attr('src',res.data.userHeadImg)
						$('.text_info p').html(res.data.content)
						$('.praiseNum').html(res.data.praiseNum)
						$('.commentNum').html(res.data.commentNum)
						$('.shareNum').html(res.data.shareNum)
						$('.downloadNum').html(res.data.downloadNum)
						$('.bg_detail').css({'background':'url(' + res.data.coverImg + ')no-repeat','background-size':'cover'})
					
					if(res.data.isFocus == 1){
						$('.zan').attr('src','images/heart.png')
					}else{
						$('.zan').attr('src','images/index_gz.png')
					}
					
					$('#audio').attr('src',res.data.bgm)
						
						
					}else{
						msg(res.msg)
					}
	 			}
		     })
		}getWorkInfo()
		//点赞
		function praiseWork() {
			$('.gif').show()
			console.log($('.head_index').attr('workid'))
			
			$.ajax({
				type: "post",
				url: urlcom + "work/praiseWork",
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					workId: $('.head_index').attr('workid')
				},
				success: function(res) {
					$('.gif').hide()
					if(res.code == 0) {
						$('.zan').attr('src', 'images/heart.png')
						msg('点赞成功')
					} else {
						msg(res.msg)
					}
		
				}
			});
		}
		//获取评论列表
		function getCommentList(current) {
			$.ajax({
				type: "post",
				url: urlcom + "work/getCommentList",
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					workId: $('.head_index').attr('workid'),
					current: current,
					size: 10
				},
				success: function(res) {
					if(res.code == 0) {
						if(res.data.length) {
							var html = '';
							$.each(res.data, function(k, v) {
								html += '<dl class="index_plitem mg_b10">' +
									'<dt><img src="' + v.userHeadimg + '"/></dt>' +
									'<dd>' +
									'<p class="color_25 bold">' + v.userName + '</p>' +
									'<h6 class="color_8 mg_tb10">15分钟前</h6>' +
									'<p class="color_25 mg_top5">' + v.content + '</p>' +
									'<p class="mg_top15"><img width="20"  class="vertical-align_m mg_r10" src="images/heart.png" alt="" />' + v.praiseNum + '</p>' +
									'</dd>' +
									'</dl>'
							});
							$('.index_pllist').html(html)
						} else {
							$('.index_pllist').html('<p class="text-center">暂无评论</p>')
						}
					} else {
						msg(res.msg)
					}

				}
			});
		}
		
          //评论
		function commentWork() {
			var content = $('.index_plinput input').val()
			if(content) {
				$.ajax({
					type: "post",
					url: urlcom + "work/commentWork",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						workId: $('.head_index').attr('workid'),
						content: content
					},
					success: function(res) {

						if(res.code == 0) {
							msg('评论成功')
							$('.index_plinput input').val('')
							getCommentList(1)
						} else {
							msg(res.msg)
						}

					}
				});
			} else {
				msg('请输入~~')
			}
		}
		function userData() {
			var id = $('.head_index').attr('workId')
			var workUserId = $('.head_index').attr('workUserId')
			if(workUserId==localStorage.getItem('userId')){
				msg('该用户是自己哦！')
			}else{
			window.location.href = 'userData.html?id=' + id+'&&workUserId='+workUserId
				}
			console.log(id)
			//			window.location.href = 'my.html?id'
		}
	</script>
</html>
	
